<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>交通网络输出可视化</title>
<style>
body{font-family:'微软雅黑',Arial,sans-serif;background:linear-gradient(120deg,#f7f7f7 60%,#e3e9f7 100%);margin:0;}
.main-container{max-width:900px;margin:32px auto;padding:24px 18px 32px 18px;background:#fff;border-radius:18px;box-shadow:0 6px 32px 0 rgba(44,62,80,0.10),0 1.5px 4px 0 rgba(44,62,80,0.06);}
h1{text-align:center;color:#34495e;margin-bottom:32px;letter-spacing:2px;}
h2{color:#2c3e50;border-left:5px solid #6c63ff;padding-left:10px;margin-top:0;margin-bottom:18px;font-size:1.3em;}
.section{background:#f8fafd;border-radius:12px;margin-bottom:28px;padding:18px 18px 10px 18px;box-shadow:0 1px 6px #e3e9f7;}
.section:hover{box-shadow:0 4px 16px #d1d8e6;}
.car-block{margin-bottom:18px;padding:12px 14px;background:#f3f4fa;border-radius:8px;box-shadow:0 1px 4px #e3e9f7;}
.car-title{color:#6c63ff;font-weight:bold;margin-bottom:8px;}
.car-sub{color:#888;font-size:0.98em;margin-bottom:6px;}
table{border-collapse:collapse;width:100%;margin-top:8px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px #e3e9f7;}
th,td{border:none;padding:8px 12px;text-align:left;}
th{background:#6c63ff;color:#fff;font-weight:500;}
tr:nth-child(even) td{background:#f3f4fa;}
.map-block{margin-bottom:14px;background:#f3f4fa;border-radius:8px;padding:10px 12px;box-shadow:0 1px 4px #e3e9f7;}
.road-list{margin-left:24px;margin-bottom:0;padding-left:0;}
.road-list li{margin-bottom:2px;list-style:disc;}
.highlight{color:#e67e22;font-weight:bold;font-size:1.1em;}
@media (max-width:600px){.main-container{padding:8px 2px;}h1{font-size:1.2em;}h2{font-size:1em;}}
</style></head><body><div class="main-container"><h1>交通网络输出可视化</h1>
<div class="section" style="display:none"><pre id="raw">车辆1 最短路径: 1 2 5 8 \n车辆1 DFS:\nDFS visit: 1\nDFS visit: 2\nDFS visit: 3\nDFS visit: 4\nDFS visit: 5\nDFS visit: 6\nDFS visit: 7\nDFS visit: 8\n车辆1 BFS:\nBFS visit: 1\nBFS visit: 2\nBFS visit: 3\nBFS visit: 5\nBFS visit: 4\nBFS visit: 6\nBFS visit: 8\nBFS visit: 7\n车辆2 最短路径: 3 4 7 \n车辆2 DFS:\nDFS visit: 3\nDFS visit: 2\nDFS visit: 1\nDFS visit: 5\nDFS visit: 4\nDFS visit: 7\nDFS visit: 6\nDFS visit: 8\n车辆2 BFS:\nBFS visit: 3\nBFS visit: 2\nBFS visit: 4\nBFS visit: 1\nBFS visit: 6\nBFS visit: 5\nBFS visit: 7\nBFS visit: 8\n车辆3 最短路径: 6 5 2 \n车辆3 DFS:\nDFS visit: 6\nDFS visit: 5\nDFS visit: 4\nDFS visit: 3\nDFS visit: 2\nDFS visit: 1\nDFS visit: 7\nDFS visit: 8\n车辆3 BFS:\nBFS visit: 6\nBFS visit: 5\nBFS visit: 7\nBFS visit: 3\nBFS visit: 4\nBFS visit: 2\nBFS visit: 8\nBFS visit: 1\n流量排序: 5(2) 2(2) 8(1) 7(1) 6(1) 4(1) 3(1) 1(1) \n</pre></div><div id="content"></div>
<script>
function renderOutput(text){
    const c=document.getElementById('content');
    c.innerHTML='';
    let carBlocks=[],carRe=/车辆(\d+)\s*最短路径:\s*([^\n]*)[\r\n]+车辆\1\s*DFS:[\r\n]+((?:DFS visit:.*[\r\n]+)+)车辆\1\s*BFS:[\r\n]+((?:BFS visit:.*[\r\n]+)+)/g,carMatch;
    while((carMatch=carRe.exec(text))!==null){
        let carId=carMatch[1],path=carMatch[2].trim().split(/\s+/),dfsLines=carMatch[3].trim().split('\n').filter(l=>l.trim()),bfsLines=carMatch[4].trim().split('\n').filter(l=>l.trim());
        carBlocks.push(`<div class='car-block'><div class='car-title'>车辆${carId} 最短路径</div><div class='car-sub'>路径节点：<span class='highlight'>${path.join(' <span style="color:#6c63ff;font-weight:bold;">→</span> ')}</span></div><div class='car-sub'>DFS遍历：</div><ul style="margin-left:18px;">${dfsLines.map(l=>`<li>${l}</li>`).join('')}</ul><div class='car-sub'>BFS遍历：</div><ul style="margin-left:18px;">${bfsLines.map(l=>`<li>${l}</li>`).join('')}</ul></div>`);
    }
    if(carBlocks.length)c.innerHTML+=`<div class='section'><h2>各车辆路径与遍历</h2>${carBlocks.join('')}</div>`;
    else{
        let m=text.match(/最短路径:([^\n]*)/),d=text.match(/DFS:\s*([\s\S]*?)BFS:/),b=text.match(/BFS:\s*([\s\S]*?)(流量排序:|={10,}|$)/);
        if(m){let path=m[1].trim().split(/\s+/);c.innerHTML+=`<div class='section'><h2>最短路径</h2><div>路径节点：<span class='highlight'>${path.join(' <span style="color:#6c63ff;font-weight:bold;">→</span> ')}</span></div></div>`;}
        if(d){let dfsLines=d[1].trim().split('\n').filter(Boolean);c.innerHTML+=`<div class='section'><h2>DFS遍历</h2><ul style="margin-left:18px;">${dfsLines.map(l=>`<li>${l}</li>`).join('')}</ul></div>`;}
        if(b){let bfsLines=b[1].trim().split('\n').filter(Boolean);c.innerHTML+=`<div class='section'><h2>BFS遍历</h2><ul style="margin-left:18px;">${bfsLines.map(l=>`<li>${l}</li>`).join('')}</ul></div>`;}
    }
    let f=text.match(/流量排序:([^\n]*)/);
    if(f){
        let flows=f[1].trim().split(/\s+/).map(s=>{let m=s.match(/(\d+)\((\d+)\)/);return m?{id:m[1],flow:m[2]}:null;}).filter(Boolean);
        let table='<table><tr><th>路口ID</th><th>流量</th></tr>';
        flows.forEach(f=>table+=`<tr><td>${f.id}</td><td>${f.flow}</td></tr>`);table+='</table>';
        c.innerHTML+=`<div class='section'><h2>流量排序</h2>${table}</div>`;
    }
    let map=text.match(/={10,}[\s\S]*={10,}/);
    if(map){
        let mapLines=map[0].split('\n').slice(1,-1),html2='',block='';
        mapLines.forEach(line=>{
            if(line.startsWith('路口')){
                if(block)html2+=`<div class='map-block'>${block}</div>`;
                block=`<strong style="color:#6c63ff">${line}</strong><ul class='road-list'>`;
            }else if(line.startsWith('      →'))block+=`<li>${line.trim()}</li>`;
            else if(line.includes('无'))block+=`<li style="color:#aaa">${line.trim()}</li>`;
            else if(line.startsWith('---'))block+='</ul>';
        });
        if(block)html2+=`<div class='map-block'>${block}</div>`;
        c.innerHTML+=`<div class='section'><h2>城市交通网络地图</h2>${html2}</div>`;
    }
}
window.onload=function(){
    var raw=document.getElementById('raw').innerText.replace(/\\n/g,'\n');
    renderOutput(raw);
};
</script></div></body></html>
